<template>
	<view class="navbox nav b-f ptl-20 flex-dir-row flex-x-start">
		<view class="nav_bg nav_bg_01">
			<navigator url="../../pages/about/about">
				<image class="nav-img" src="../../static/images/about.png" mode="widthFix"></image>
				<text  class="tit">关于</text>
			</navigator>
		</view>
		<view class="nav_bg nav_bg_02">
			<navigator url="../../pages/product/product">
				<image class="nav-img" src="../../static/images/product.png" mode="widthFix"></image>
				<text class="tit">产品</text>
			</navigator>
		</view>
		<view class="nav_bg nav_bg_03">
			<navigator url="../../pages/news/news">
				<image class="nav-img" src="../../static/images/news.png" mode="widthFix"></image>
				<text class="tit">新闻</text>
			</navigator>
		</view>
		<view class="nav_bg nav_bg_04">
			<navigator url="../../pages/case/case">
				<image class="nav-img" src="../../static/images/case.png" mode="widthFix"></image>
				<text class="tit">案例</text>
			</navigator>
		</view>
		<view class="nav_bg nav_bg_05">
			<navigator url="../../pages/connect/connect">
				<image class="nav-img" src="../../static/images/contact.png" mode="widthFix"></image>
				<text class="tit">联系</text>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		name: "navbar",
		data() {
			return {

			};
		}
	}
</script>

<style lang='less'>
	/* 导航部分样式 */
	.nav_bg_01 {
		background: #F57D5B;
	}

	.nav_bg_02 {
		background: #4AC6EA;
	}

	.nav_bg_03 {
		background: #B2DE27;
	}

	.nav_bg_04 {
		background: #F97BA0;
	}

	.nav_bg_05 {
		background: #6495ED;
	}

	.nav_bg {
		border-radius: 50%;
		height: 90rpx;
		width: 90rpx;
		text-align: center;
		line-height: 104rpx;
		position: relative;
	
	}
	.nav_bg .tit{
		position: absolute;
		left: 50%;
		top: 70rpx;
		transform: translateX(-50%);
		width: 130rpx;
		font-size: 24rpx;
	}

	.nav-img {
		height: 60rpx;
		width: 60rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.nav {
		width: 750rpx;
		box-sizing: border-box;
		flex-wrap: wrap;
		padding-bottom: 40rpx;

	}

	.ptl-20 {
		padding: 20rpx;
	}

	.flex-dir-row {
		flex-direction: row;
		display: flex;
		justify-content: space-around;
	}

	.b-f {
		background: #fff;
	}
</style>
